<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <title>Nightscout</title>

  <link href="/images/round1.png" rel="icon" id="favicon" type="image/png" />
  <link rel="apple-touch-icon" sizes="57x57" href="/images/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/images/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/images/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/images/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/images/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/images/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-180x180.png">

  <style type="text/css">
    @import url("//fonts.googleapis.com/css?family=Open+Sans:700");
    <%- include('clock-shared.css', {}); %>
    <%if (face === 'config') { %>
    <%- include('clock-config.css', {}); %>
    <% } %>
  </style>
</head>

<body>
  <main>
    <a href="/" id="closeButton" class="close"></a>
    <div id="inner" data-face="<%= face %>"<%-(face === 'config') ? 'data-face-config="cy10"' : '' %>>
    </div>
  </main>
  <script src="<%= locals.bundle %>/js/bundle.clock.js"></script>

  <script type="text/javascript">
    var clockFace = "<%= face  %>"; // can now be used in scripts

    var parts = (location.search || '?').substring(1).split('&');
    var token = '';
    parts.forEach(function(val) {
      if (val.startsWith('token=')) {
        token = val.substring('token='.length);
      }
    });

    var secret = typeof localStorage !== 'undefined' ? localStorage.getItem('apisecrethash') : '';
    var src = '/api/v1/status.js?t=' + Date.now();

    if (secret) {
      src += '&secret=' + secret;
    } else if (token) {
      src += '&token=' + token;
    }

    var script = document.createElement('script');
    script.onload = function() {
      window.Nightscout.client.init();
    };
    script.src = src;

    document.head.appendChild(script); //or something of the likes
    <%if (face !== 'config') { %>
    var buttonVisible = true;

    function hideClose () {
      document.getElementById('closeButton').classList.add('hidden');
      buttonVisible = false;
    }

    // Show on start so user knows it's there
    setTimeout(function() {
      hideClose();
    }, 2000);

    function showClose () {
      if (buttonVisible) return;

      buttonVisible = true;
      document.getElementById('closeButton').classList.remove('hidden');
      setTimeout(function() {
        hideClose();
      }, 2000);
    }

    window.addEventListener('touchstart', function() {
      showClose();
    });

    window.addEventListener('click', function() {
      showClose();
    });

    // This fixes the issue of a "stale" CGM value displaying indefinately.
    // It displays "Internet offline." until internet is restored.
    function uOffline() { 
      document.body.innerHTML =
        'Internet offline.'
    }
    // Return to normal as soon as internet connectivity is restored.              
    function uOnline() { 
    	location.reload()
    }
    if(window.addEventListener) { 
      window.addEventListener('offline', uOffline);
      window.addEventListener('online', uOnline);
    } else {
      document.body.attachEvent('onoffline', uOffline);
      document.body.attachEvent('ononline', uOnline);
    }

    <% } %>
  </script>
  <%if (face == 'config') { %>
  <%- include('clock-config.html', {}); %>
  <% } %>
</body>

</html>
